<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
    <button id="getUserInfo" type="button">获取用户信息</button>
    <button id="addUser" type="button">添加用户</button>
    <button id="deleteUser" type="button">删除</button>
    <script type="text/javascript">
        $(document).ready(function () {
           $("#getUserInfo").click(() => {
               $.ajax({
                   url: 'http://127.0.0.1:2022/user/info?id=1',
                   method: 'get',
                   dataType: 'json',
                   success: (res) => {
                       console.log(res)
                   },
                   error: err => {
                       console.log(err)
                   }
               })
           })


            $("#addUser").click(() => {
                const user = {
                    userId: 2022,  // 这里改正一下，刚蔡postman传的是id，导致没有接收到，因为我们后台user对象中申明的是userId
                    username: '全栈小白'
                }
                $.ajax({
                    // 请求地址
                    url: 'http://127.0.0.1:2022/user/save',
                    // 请求方式
                    method: 'post',
                    // 响应期望类型，告诉服务器我要json格式的数据
                    dataType: 'json',
                    // 设置请求头，默认是 application/x-www-form-urlencoded; charset=UTF-8
                    contentType: 'application/json;charset=utf-8',
                    // 设置参数，是json字符串，不是object
                    data: JSON.stringify(user),
                    // 成功的回调
                    success: (res) => {
                        console.log(res)
                    },
                    // 失败的回调
                    error: err => {
                        console.log(err)
                    }
                })
            })

            $("#deleteUser").click(() => {
                $.ajax({
                    url: 'http://127.0.0.1:2022/user/remove/2022',
                    method: 'delete',
                    dataType: 'json',
                    success: (res) => {
                        console.log(res)
                    },
                    error: err => {
                        console.log(err)
                    }
                })
            })
        })
    </script>
</body>
</html>